<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Welcome | Modern Landing</title>
    <style>
        :root {
            --gradient-1: linear-gradient(45deg, #00ff87, #60efff);
            --gradient-2: linear-gradient(135deg, #ff6b6b, #ffd93d);
            --accent: #00ff88;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', sans-serif;
        }

        body {
            min-height: 100vh;
            overflow-x: hidden;
            background: #0a192f;
            color: #fff;
            position: relative;
        }

        /* 加载动画 */
        .loader {
            position: fixed;
            width: 100%;
            height: 100%;
            background: #0a192f;
            z-index: 9999;
            display: flex;
            justify-content: center;
            align-items: center;
            animation: loaderOut 1s 2s forwards;
        }

        .loader-dot {
            width: 20px;
            height: 20px;
            background: var(--accent);
            border-radius: 50%;
            margin: 0 10px;
            animation: dotPulse 1.2s infinite;
        }

        /* 时间显示 */
        .time-container {
            position: fixed;
            top: 30px;
            right: 30px;
            z-index: 1000;
            perspective: 1000px;
            opacity: 0;
            transform: translateY(-50px) rotateX(90deg);
            animation: timeEntrance 1.5s cubic-bezier(0.23, 1, 0.32, 1) forwards 2.2s;
        }

        .time-display {
            font-size: 1.8rem;
            background: var(--gradient-1);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            text-shadow: 0 0 20px rgba(96, 239, 255, 0.4);
            padding: 10px 20px;
            border-radius: 15px;
            backdrop-filter: blur(5px);
            border: 1px solid rgba(96, 239, 255, 0.2);
            box-shadow: 0 0 30px rgba(0, 255, 135, 0.1);
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
        }

        .time-display::after {
            content: '';
            width: 8px;
            height: 8px;
            background: #00ff87;
            border-radius: 50%;
            margin-left: 10px;
            animation: pulse 1s infinite;
        }

        /* 主容器 */
        .container {
            position: relative;
            z-index: 2;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            padding: 2rem;
            opacity: 0;
            animation: fadeIn 1.5s ease-out forwards 2.5s;
        }

        /* 标题文本 */
        .hero-text {
            text-align: center;
            margin-bottom: 3rem;
            overflow: hidden;
        }

        .hero-text h1 {
            font-size: 4.5rem;
            margin-bottom: 1.5rem;
            transform: translateY(100%);
            animation: slideUp 1s cubic-bezier(0.22, 0.61, 0.36, 1) forwards 3s;
            background: var(--gradient-1);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .hero-text p {
            font-size: 1.5rem;
            opacity: 0;
            transform: translateY(50px);
            animation: textFloat 1s 3.5s ease-out forwards;
            color: #8892b0;
        }

        /* 按钮样式 */
        .cta-button {
            position: relative;
            padding: 1.2rem 2.5rem;
            font-size: 1.2rem;
            background: transparent;
            border: 2px solid var(--accent);
            color: var(--accent);
            border-radius: 50px;
            cursor: pointer;
            overflow: hidden;
            transition: all 0.3s ease;
            opacity: 0;
            animation: buttonEntrance 1s 4s forwards;
        }

        .cta-button:hover {
            background: #00ff8720;
            transform: translateY(-3px);
            box-shadow: 0 10px 30px rgba(0, 255, 135, 0.2);
        }

        /* 功能卡片 */
        .feature-cards {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 2rem;
            margin-top: 3rem;
            opacity: 0;
            transform: translateY(50px);
            animation: cardsEntrance 1s 4.5s forwards;
        }

        .card {
            background: rgba(255, 255, 255, 0.05);
            padding: 2rem;
            border-radius: 20px;
            backdrop-filter: blur(10px);
            border: 1px solid rgba(96, 239, 255, 0.1);
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            cursor: pointer;
            transform-style: preserve-3d;
        }

        .card h3 {
            color: var(--accent);
            margin-bottom: 1rem;
        }

        .card p {
            color: #8892b0;
            line-height: 1.6;
        }

        /* 装饰图形 */
        .deco-shapes div {
            position: absolute;
            background: var(--gradient-1);
            opacity: 0.1;
            filter: blur(50px);
            border-radius: 50%;
            animation: float 20s infinite linear;
        }

        /* 动画定义 */
        @keyframes fadeIn {
            to { opacity: 1 }
        }

        @keyframes slideUp {
            to { transform: translateY(0) }
        }

        @keyframes textFloat {
            to { opacity: 1; transform: translateY(0) }
        }

        @keyframes buttonEntrance {
            to { opacity: 1 }
        }

        @keyframes float {
            0%, 100% { transform: translate(0, 0) }
            25% { transform: translate(10vw, 10vh) }
            50% { transform: translate(-5vw, -15vh) }
            75% { transform: translate(-10vw, 5vh) }
        }

        @keyframes timeEntrance {
            to { opacity: 1; transform: translateY(0) rotateX(0) }
        }

        @keyframes pulse {
            50% { transform: scale(1.2); opacity: 1 }
        }

        @keyframes dotPulse {
            50% { transform: scale(1.5) }
        }

        @keyframes loaderOut {
            to { opacity: 0; visibility: hidden }
        }

        @keyframes cardsEntrance {
            to { opacity: 1; transform: translateY(0) }
        }

        @keyframes cardEntrance {
            from { opacity: 0; transform: translateY(50px) rotateX(-30deg) }
            to { opacity: 1; transform: translateY(0) rotateX(0) }
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .hero-text h1 {
                font-size: 2.5rem;
                margin-top: 40px;
            }

            .feature-cards {
                grid-template-columns: 1fr;
                padding: 0 1rem;
            }

            .card {
                transform: scale(0.95);
            }

            .time-display {
                font-size: 1.2rem;
                padding: 8px 15px;
            }
        }

        @media (hover: none) {
            .card {
                transform: none !important;
            }
        }
    </style>
</head>
<body>
<!-- 加载动画 -->
<div class="loader">
    <div class="loader-dot"></div>
    <div class="loader-dot"></div>
    <div class="loader-dot"></div>
</div>

<!-- 装饰图形 -->
<div class="deco-shapes">
    <div style="width: 300px; height: 300px; top: 20%; left: 10%"></div>
    <div style="width: 200px; height: 200px; top: 60%; right: 15%"></div>
</div>

<!-- 时间显示 -->
<div class="time-container">
    <div class="time-display" id="time"></div>
</div>

<!-- 主内容 -->
<div class="container">
    <div class="hero-text">
        <h1>欢迎登录成功！</h1>
        <p>开发者：于文铎</p>
    </div>

    <button class="cta-button">探索更多 →</button>

    <!-- 功能卡片 -->
    <div class="feature-cards">
        <div class="card">
            <h3>交互体验</h3>
            <p>流畅的动画过渡与实时反馈</p>
        </div>
        <div class="card">
            <h3>响应式设计</h3>
            <p>完美适配各种设备尺寸</p>
        </div>
        <div class="card">
            <h3>现代风格</h3>
            <p>前沿设计语言与视觉效果</p>
        </div>
    </div>
</div>

<script>
    // 时间显示
    function updateTime() {
        const timeElement = document.getElementById('time');
        const now = new Date();
        timeElement.innerHTML = now.toLocaleTimeString('zh-CN', {
            hour: '2-digit',
            minute: '2-digit',
            second: '2-digit',
            hour12: false
        });
    }
    setInterval(updateTime, 1000);
    updateTime();

    // 3D视差效果
    document.addEventListener('mousemove', (e) => {
        const cards = document.querySelectorAll('.card');
        const centerX = window.innerWidth / 2;
        const centerY = window.innerHeight / 2;

        cards.forEach(card => {
            const rect = card.getBoundingClientRect();
            const cardX = rect.left + rect.width/2;
            const cardY = rect.top + rect.height/2;

            const rotateX = -(e.clientY - cardY) * 0.02;
            const rotateY = (e.clientX - cardX) * 0.02;

            card.style.transform = `perspective(1000px)
                    rotateX(${rotateX}deg)
                    rotateY(${rotateY}deg)
                    translateZ(10px)`;
        });
    });

    // 滚动动画
    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if(entry.isIntersecting) {
                entry.target.style.animation = `cardEntrance 0.6s ease-out forwards`;
            }
        });
    }, { threshold: 0.1 });

    document.querySelectorAll('.card').forEach(card => {
        observer.observe(card);
    });

    // 触摸反馈
    document.querySelectorAll('.card').forEach(card => {
        card.addEventListener('touchstart', () => {
            card.style.transform = 'scale(0.95)';
        });

        card.addEventListener('touchend', () => {
            card.style.transform = 'scale(1)';
        });
    });

    // 移动端适配
    function checkOrientation() {
        if (window.matchMedia("(orientation: portrait)").matches) {
            document.body.classList.add('portrait');
        } else {
            document.body.classList.remove('portrait');
        }
    }
    window.addEventListener('resize', checkOrientation);
    checkOrientation();
</script>
</body>
</html>